<template>
    <section>
        <h2>已经完成<span>{{ comLen }}</span></h2>
        <!-- <h1>{{ res.todos }}</h1>
        <h1>{{ todos }}</h1>
        <h1>{{ res.todos === todos  ? 'OK':"AA"}}</h1> -->
        <!-- <h1>{{ todos }}</h1> -->
        <ul>
            <li v-for="(item,index) in todos" :key="item.id" v-show="item.checked">
                <input type="checkbox" v-model="item.checked"/>
                <p>{{ item.content }}</p>
                <a href="javascript:;" @click="emit('delItem',index)">-</a>
            </li>
        </ul>
    </section>
</template>
<script setup>
import {computed, nextTick } from 'vue'

// let res = defineProps({
//         todos:Array
//     })


  let {todos} = defineProps({
        todos:Array
    })
// 统计个数
    let comLen = computed( ()=>{

        return todos.filter(item=>item.checked).length
    })
//  3. 删除操作
let emit = defineEmits(['delItem'])
</script>
<script>
export default {
    name: "complateCom"
}
</script>
<style scoped>
ul {
    padding: 0;
    list-style: none;
}
</style>